<!--
 * @Author: your name
 * @Date: 2022-01-11 21:39:50
 * @LastEditTime: 2022-01-12 04:39:33
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \campus-market-frontend-master\src\pages\demand\index.vue
-->
<route lang="yaml">
meta:
  requiresAuth: true
</route>

<template>
  <el-container>
    <el-header><Header></Header></el-header>
    <el-main>
      <el-card class="demandGood" v-for="item in items" :key="item.id">
        <el-row>
          <el-col :span="4"
            ><div class="demandImg">
              <img
                :src="item.photos[0] ? baseUrl + item.photos[0].path : baseImg"
                alt="图片加载失败"
              /></div
          ></el-col>
          <el-col :span="14"
            ><div class="info">
              <h2>{{ item.name }}</h2>
              <span>{{ item.description }}</span>
              <!-- <span>{{item}}</span> -->
            </div></el-col
          >
          <el-col :span="6"
            ><div class="price">
              <h1>价格：{{ item.price }}元</h1>
            </div></el-col
          >
        </el-row>
      </el-card>
    </el-main>
    <el-footer><Footer></Footer></el-footer>
  </el-container>
</template>

<script setup lang="ts">
import Footer from '../../components/footer.vue'
import Header from '../../components/header.vue'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { getItems } from '../../services/items'

const items = ref()
const baseUrl = ref('http://159.75.101.15:3000/')
const baseImg = ref(
  'https://iconfont.alicdn.com/s/7a51524d-a4ce-4018-a386-9a03e0a044ee_origin.svg'
)

onMounted(async () => {
  items.value = (await getItems()).data
  items.value = items.value.filter((element: { status: string }) => {
    return element.status === 'REQUEST'
  })
})
</script>

<style lang="less" scoped>
.el-container {
  height: 800px;
  .el-footer {
    padding: 0;
  }
  .el-main {
    display: block;
    overflow: inherit;
    .el-card {
      border-radius: 20px;
      margin-left: 10%;
      padding: 0 20px 0 0;
      width: 80%;
      height: auto;
      margin-bottom: 20px;
      .demandImg {
        img {
          width: 150px;
        }
      }
      .price {
        text-align: center;
        position: relative;
        top: 40px;
        color: red;
      }
    }
  }
}
</style>
